

import { Button, Card, Space, Table, TableProps } from 'antd';
import React from 'react';
import { Icon } from '@/components';
import { dictionary } from '@/modules';
import { CapabilityButton } from '@/components/capability';
import { useAddMenu, useDelMenu, useSaveMenu, useEditMenu, useLevelMenu } from './capabilityHooks';
import { MenuController } from '@/controllers/MenuController';
import styles from './index.module.less';
import { useNavigate } from 'react-router-dom';

/** 菜单管理 */
export default function MenuManage() {

    const menuController = React.useMemo(() => new MenuController(), [])

    const columns = React.useMemo(() => {
        return [
            {
                title: '名称',
                dataIndex: 'menuName',
                width: 220,
            },
            {
                title: 'ID',
                dataIndex: 'menuId',
                width: 200,
                align: 'right',
            },
            {
                title: '图标',
                dataIndex: 'iconId',
                width: 40,
                align: 'center',
                render: (text: string) => <Button type='text' icon={<Icon id={text} />} ></Button>
            },
            {
                title: '是否隐藏',
                dataIndex: 'isHide',
                width: 70,
                render: (e) => e ? '是' : '否',
            },
            {
                title: '模块',
                dataIndex: 'moduleId',
                render: (e) => e && <ModuleNode id={e} />,
            },
            {
                title: '层级',
                dataIndex: 'level',
                width: 70,
                render: (e) => e || 0,
            },
            {
                title: '路径',
                dataIndex: 'path',
            },
            {
                title: '顺序',
                dataIndex: 'order',
                width: 60,
                align: 'right',
            },
            {
                title: '操作',
                dataIndex: 'operation',
                align: 'right',
                width: 140,
                render: (_v, r, i) => (
                    <Space className={styles.operation} >
                        <CapabilityButton type='link' useCapability={useLevelMenu} record={r} index={i} />
                        <CapabilityButton type='link' useCapability={useEditMenu} record={r} index={i} />
                        <CapabilityButton type='link' useCapability={useDelMenu} record={r} index={i} />
                    </Space>
                )
            },
        ] as TableProps<any>['columns']
    }, [])

    const menu = menuController.useMemo(s => s.menu);

    const menuTree = React.useMemo(() => {
        function ct(pid?: string) {
            const m = menu
                .filter(m => pid ? m.menuParentId === pid : !m.menuParentId)
                .sort((a, b) => (b.order || 0) - (a.order || 0))
                .map(m => ({ ...m, children: ct(m.menuId) }))
            return m.length > 0 ? m : undefined
        }
        return ct();
    }, [menu])

    // 获取菜单数据
    React.useEffect(() => { menuController.queryMenu() }, [menuController])

    return (
        <MenuController.Context.Provider value={menuController} >
            <div className={styles.menuManage} >
                <Card className={styles.card} size='small'>
                    <Space style={{ width: '100%', justifyContent: 'end' }} >
                        <CapabilityButton type='primary' icon={<Icon id='I202404161115' />} useCapability={useAddMenu} />
                        <CapabilityButton type='primary' icon={<Icon id='I202404161129' />} useCapability={useSaveMenu} />
                    </Space>
                </Card>
                <Table
                    rowKey='menuId'
                    pagination={false}
                    columns={columns}
                    dataSource={menuTree}
                />
            </div>
        </MenuController.Context.Provider>
    )
}

// 模块显示组件
export function ModuleNode(props: { id: string }) {

    const { id } = props;

    const navigate = useNavigate()

    const module = React.useMemo(() => dictionary.get(id), [id])

    const onClick = React.useCallback(() => {
        navigate(`/dev/modulesDetails?id=${id}`)
    }, [id, navigate])

    if (module) {
        return (
            <Button type='link' onClick={onClick} >{module.title}({module.id})</Button>
        )
    } else {
        return (
            <span>模块不存在</span>
        )
    }
}
